/* Tailwind CSS v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局滚动条样式 */
@layer base {
  /* Webkit 浏览器滚动条样式 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: hsl(var(--b2));
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--bc) / 0.2);
    border-radius: 4px;
    transition: all 0.2s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--bc) / 0.3);
  }

  ::-webkit-scrollbar-thumb:active {
    background: hsl(var(--bc) / 0.4);
  }

  /* 滚动条角落 */
  ::-webkit-scrollbar-corner {
    background: hsl(var(--b2));
  }

  /* Firefox 滚动条样式 */
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--bc) / 0.2) hsl(var(--b2));
  }

  /* 悬停时的滚动条样式 */
  *:hover {
    scrollbar-color: hsl(var(--bc) / 0.3) hsl(var(--b2));
  }

  /* 主题切换时的平滑过渡 */
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-thumb {
    transition: background-color 0.3s ease;
  }

  /* 主题选择器特殊滚动条样式 */
  .theme-switcher-scroll::-webkit-scrollbar {
    width: 6px;
  }

  .theme-switcher-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
  }

  .theme-switcher-scroll::-webkit-scrollbar-thumb {
    background: hsl(var(--bc) / 0.15);
    border-radius: 3px;
    transition: all 0.2s ease;
  }

  .theme-switcher-scroll::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--bc) / 0.25);
  }

  /* 代码块滚动条样式 */
  pre::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  pre::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  pre::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }

  pre::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
  }

  /* 移动端滚动优化 */
  @media (max-width: 768px) {
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    .theme-switcher-scroll::-webkit-scrollbar {
      width: 4px;
    }
  }

  /* 高对比度模式支持 */
  @media (prefers-contrast: high) {
    ::-webkit-scrollbar-thumb {
      background: hsl(var(--bc) / 0.5);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: hsl(var(--bc) / 0.7);
    }
  }

  /* 减少动画偏好支持 */
  @media (prefers-reduced-motion: reduce) {
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-thumb {
      transition: none;
    }
  }

  /* 暗色主题优化 */
  [data-theme='dark'] ::-webkit-scrollbar-track {
    background: hsl(var(--b3));
  }

  [data-theme='dark'] ::-webkit-scrollbar-thumb {
    background: hsl(var(--bc) / 0.3);
  }

  [data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--bc) / 0.4);
  }
}
/* DaisyUI 主题变量 */
:root {
  /* 明亮主题 */
  --p: 231 70% 72%; /* primary */
  --pf: 231 70% 65%; /* primary-focus */
  --pc: 0 0% 100%; /* primary-content */
  --s: 291 47% 71%; /* secondary */
  --sf: 291 47% 64%; /* secondary-focus */
  --sc: 0 0% 100%; /* secondary-content */
  --a: 316 70% 79%; /* accent */
  --af: 316 70% 72%; /* accent-focus */
  --ac: 0 0% 100%; /* accent-content */
  --n: 220 13% 28%; /* neutral */
  --nf: 220 13% 21%; /* neutral-focus */
  --nc: 0 0% 100%; /* neutral-content */
  --b1: 0 0% 100%; /* base-100 */
  --b2: 0 0% 98%; /* base-200 */
  --b3: 0 0% 95%; /* base-300 */
  --bc: 220 13% 15%; /* base-content */
  --in: 198 93% 60%; /* info */
  --su: 158 64% 52%; /* success */
  --wa: 43 96% 56%; /* warning */
  --er: 0 91% 71%; /* error */
}

/* 暗色主题 */
[data-theme='dark'] {
  --p: 231 70% 72%;
  --pf: 231 70% 65%;
  --pc: 0 0% 100%;
  --s: 291 47% 71%;
  --sf: 291 47% 64%;
  --sc: 0 0% 100%;
  --a: 316 70% 79%;
  --af: 316 70% 72%;
  --ac: 0 0% 100%;
  --n: 220 13% 15%;
  --nf: 220 13% 8%;
  --nc: 220 13% 85%;
  --b1: 220 13% 15%;
  --b2: 220 13% 21%;
  --b3: 220 13% 28%;
  --bc: 220 13% 95%;
  --in: 198 93% 60%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
}

/* 森林主题 */
[data-theme='forest'] {
  --p: 142 76% 36%; /* green primary */
  --pf: 142 76% 29%;
  --pc: 0 0% 100%;
  --s: 142 69% 58%; /* green secondary */
  --sf: 142 69% 51%;
  --sc: 0 0% 100%;
  --a: 84 81% 44%; /* lime accent */
  --af: 84 81% 37%;
  --ac: 0 0% 100%;
  --n: 220 13% 28%;
  --nf: 220 13% 21%;
  --nc: 0 0% 100%;
  --b1: 142 76% 97%; /* light green base */
  --b2: 142 76% 93%;
  --b3: 142 76% 87%;
  --bc: 142 76% 15%;
  --in: 186 77% 47%;
  --su: 142 76% 36%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
}

/* 海洋主题 */
[data-theme='ocean'] {
  --p: 217 91% 60%; /* blue primary */
  --pf: 217 91% 53%;
  --pc: 0 0% 100%;
  --s: 217 91% 35%; /* blue secondary */
  --sf: 217 91% 28%;
  --sc: 0 0% 100%;
  --a: 186 77% 47%; /* cyan accent */
  --af: 186 77% 40%;
  --ac: 0 0% 100%;
  --n: 215 25% 27%;
  --nf: 215 25% 20%;
  --nc: 0 0% 100%;
  --b1: 217 91% 97%; /* light blue base */
  --b2: 217 91% 93%;
  --b3: 217 91% 87%;
  --bc: 217 91% 15%;
  --in: 186 77% 47%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
}

/* 日落主题 */
[data-theme='sunset'] {
  --p: 25 95% 53%; /* orange primary */
  --pf: 25 95% 46%;
  --pc: 0 0% 100%;
  --s: 20 90% 48%; /* orange secondary */
  --sf: 20 90% 41%;
  --sc: 0 0% 100%;
  --a: 45 93% 47%; /* yellow accent */
  --af: 45 93% 40%;
  --ac: 0 0% 100%;
  --n: 25 39% 45%;
  --nf: 25 39% 38%;
  --nc: 0 0% 100%;
  --b1: 25 95% 97%; /* light orange base */
  --b2: 25 95% 91%;
  --b3: 25 95% 83%;
  --bc: 25 95% 15%;
  --in: 186 77% 47%;
  --su: 158 64% 52%;
  --wa: 45 93% 47%;
  --er: 0 91% 71%;
}

/* 全局基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  background-color: hsl(var(--b1));
  color: hsl(var(--bc));
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* DaisyUI 基础组件样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn:focus-visible {
  outline: 2px solid hsl(var(--p));
  outline-offset: 2px;
}

.btn-primary {
  background-color: hsl(var(--p));
  border-color: hsl(var(--p));
  color: hsl(var(--pc));
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 10;
}

.btn-primary:hover {
  background-color: hsl(var(--pf));
  border-color: hsl(var(--pf));
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

.btn-secondary {
  background-color: hsl(var(--s));
  border-color: hsl(var(--s));
  color: hsl(var(--sc));
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}

.btn-secondary:hover {
  background-color: hsl(var(--sf));
  border-color: hsl(var(--sf));
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid hsl(var(--p));
  color: hsl(var(--p));
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

.btn-outline:hover {
  background-color: hsl(var(--p));
  color: hsl(var(--pc));
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.btn-ghost {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  color: hsl(var(--bc));
  backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  min-height: 3rem;
}

.btn-circle {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  padding: 0;
}

/* 卡片组件 */
.card {
  background-color: hsl(var(--b1));
  border-radius: 1rem;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-body {
  padding: 2rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.card-side {
  display: flex;
  align-items: stretch;
}

/* 导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  min-height: 4rem;
  background-color: hsl(var(--b1) / 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid hsl(var(--b3) / 0.5);
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.navbar-start {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

.navbar-center {
  display: flex;
  align-items: center;
  flex: none;
  justify-content: center;
}

.navbar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
  gap: 0.5rem;
}

/* 导航栏响应式 */
@media (min-width: 1024px) {
  .navbar {
    padding: 0 2rem;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 0.75rem;
  }

  .navbar-start {
    flex: 0 0 auto;
  }

  .navbar-end {
    flex: 0 0 auto;
  }
}

/* Hero 区域 */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  max-width: 80rem;
  z-index: 10;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

/* Hero 背景图片 */
.hero-section {
  background:
    linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Hero 区域按钮特殊样式 */
.hero-section .btn-primary {
  background: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero-section .btn-primary:hover {
  background: linear-gradient(135deg, hsl(var(--pf)) 0%, hsl(var(--sf)) 100%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}

.hero-section .btn-outline {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: white;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
}

.hero-section .btn-outline:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.8);
  color: white;
}

[data-theme='dark'] .hero-section {
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%),
    url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

[data-theme='forest'] .hero-section {
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.2) 100%),
    url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

[data-theme='ocean'] .hero-section {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%),
    url('https://images.unsplash.com/photo-1439066615861-d1af74d74000?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

[data-theme='sunset'] .hero-section {
  background:
    linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(249, 115, 22, 0.2) 100%),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

/* 极简主题 */
[data-theme='minimal'] {
  --p: 0 0% 0%;
  --pf: 0 0% 20%;
  --pc: 0 0% 100%;
  --s: 220 13% 42%;
  --sf: 220 13% 35%;
  --sc: 0 0% 100%;
  --a: 220 13% 28%;
  --af: 220 13% 21%;
  --ac: 0 0% 100%;
  --n: 220 13% 62%;
  --nf: 220 13% 55%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 0 0% 98%;
  --b3: 0 0% 95%;
  --bc: 0 0% 0%;
  --in: 220 13% 42%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
}

[data-theme='minimal'] .hero-section {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(107, 114, 128, 0.05) 100%),
    url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

/* 商务主题 */
[data-theme='corporate'] {
  --p: 217 91% 35%;
  --pf: 217 91% 28%;
  --pc: 0 0% 100%;
  --s: 215 25% 35%;
  --sf: 215 25% 28%;
  --sc: 0 0% 100%;
  --a: 198 93% 60%;
  --af: 198 93% 53%;
  --ac: 0 0% 100%;
  --n: 215 25% 40%;
  --nf: 215 25% 33%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 215 25% 98%;
  --b3: 215 25% 95%;
  --bc: 215 25% 15%;
  --in: 198 93% 60%;
  --su: 158 64% 42%;
  --wa: 43 96% 46%;
  --er: 0 91% 61%;
}

[data-theme='corporate'] .hero-section {
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(71, 85, 105, 0.9) 100%),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

/* 极光主题 */
[data-theme='aurora'] {
  --p: 251 91% 73%;
  --pf: 251 91% 66%;
  --pc: 0 0% 100%;
  --s: 217 91% 60%;
  --sf: 217 91% 53%;
  --sc: 0 0% 100%;
  --a: 316 70% 79%;
  --af: 316 70% 72%;
  --ac: 0 0% 100%;
  --n: 220 13% 28%;
  --nf: 220 13% 21%;
  --nc: 0 0% 100%;
  --b1: 251 91% 95%;
  --b2: 251 91% 90%;
  --b3: 251 91% 85%;
  --bc: 251 91% 15%;
  --in: 198 93% 60%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
}

[data-theme='aurora'] .hero-section {
  background:
    linear-gradient(
      135deg,
      rgba(139, 92, 246, 0.3) 0%,
      rgba(59, 130, 246, 0.3) 50%,
      rgba(236, 72, 153, 0.3) 100%
    ),
    url('https://images.unsplash.com/photo-1531366936337-7c912a4589a7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

/* 彩虹主题 */
[data-theme='rainbow'] {
  --p: 0 84% 60%;
  --pf: 0 84% 53%;
  --pc: 0 0% 100%;
  --s: 251 91% 73%;
  --sf: 251 91% 66%;
  --sc: 0 0% 100%;
  --a: 158 64% 52%;
  --af: 158 64% 45%;
  --ac: 0 0% 100%;
  --n: 220 13% 28%;
  --nf: 220 13% 21%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 0 0% 98%;
  --b3: 0 0% 95%;
  --bc: 220 13% 15%;
  --in: 198 93% 60%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
}

[data-theme='rainbow'] .hero-section {
  background:
    linear-gradient(
      135deg,
      rgba(239, 68, 68, 0.2) 0%,
      rgba(245, 158, 11, 0.2) 20%,
      rgba(16, 185, 129, 0.2) 40%,
      rgba(6, 182, 212, 0.2) 60%,
      rgba(59, 130, 246, 0.2) 80%,
      rgba(139, 92, 246, 0.2) 100%
    ),
    url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

/* 霓虹主题 */
[data-theme='neon'] {
  --p: 251 91% 73%;
  --pf: 251 91% 66%;
  --pc: 0 0% 100%;
  --s: 316 70% 79%;
  --sf: 316 70% 72%;
  --sc: 0 0% 100%;
  --a: 198 93% 60%;
  --af: 198 93% 53%;
  --ac: 0 0% 100%;
  --n: 220 13% 21%;
  --nf: 220 13% 14%;
  --nc: 220 13% 85%;
  --b1: 0 0% 0%;
  --b2: 220 13% 8%;
  --b3: 220 13% 15%;
  --bc: 220 13% 95%;
  --in: 198 93% 60%;
  --su: 120 100% 55%;
  --wa: 43 100% 50%;
  --er: 340 100% 50%;
}

[data-theme='neon'] .hero-section {
  background:
    linear-gradient(
      135deg,
      rgba(168, 85, 247, 0.4) 0%,
      rgba(236, 72, 153, 0.4) 50%,
      rgba(6, 182, 212, 0.4) 100%
    ),
    url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

/* 山峦主题 */
[data-theme='mountain'] {
  --p: 25 39% 55%;
  --pf: 25 39% 48%;
  --pc: 0 0% 100%;
  --s: 25 39% 40%;
  --sf: 25 39% 33%;
  --sc: 0 0% 100%;
  --a: 25 39% 65%;
  --af: 25 39% 58%;
  --ac: 0 0% 100%;
  --n: 25 39% 30%;
  --nf: 25 39% 23%;
  --nc: 0 0% 100%;
  --b1: 25 39% 98%;
  --b2: 25 39% 95%;
  --b3: 25 39% 90%;
  --bc: 25 39% 15%;
  --in: 198 93% 60%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
}

[data-theme='mountain'] .hero-section {
  background:
    linear-gradient(135deg, rgba(120, 113, 108, 0.3) 0%, rgba(87, 83, 78, 0.3) 100%),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

/* 星空主题 */
[data-theme='space'] {
  --p: 244 70% 65%;
  --pf: 244 70% 58%;
  --pc: 0 0% 100%;
  --s: 251 91% 73%;
  --sf: 251 91% 66%;
  --sc: 0 0% 100%;
  --a: 262 83% 70%;
  --af: 262 83% 63%;
  --ac: 0 0% 100%;
  --n: 251 91% 20%;
  --nf: 251 91% 13%;
  --nc: 0 0% 100%;
  --b1: 251 91% 8%;
  --b2: 251 91% 15%;
  --b3: 251 91% 22%;
  --bc: 251 91% 95%;
  --in: 198 93% 60%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
}

[data-theme='space'] .hero-section {
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%),
    url('https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
}

/* 粒子主题 */
[data-theme='particles'] {
  --p: 244 70% 65%;
  --pf: 244 70% 58%;
  --pc: 0 0% 100%;
  --s: 251 91% 73%;
  --sf: 251 91% 66%;
  --sc: 0 0% 100%;
  --a: 262 83% 70%;
  --af: 262 83% 63%;
  --ac: 0 0% 100%;
  --n: 220 13% 28%;
  --nf: 220 13% 21%;
  --nc: 0 0% 100%;
  --b1: 251 91% 20%;
  --b2: 251 91% 25%;
  --b3: 251 91% 30%;
  --bc: 251 91% 95%;
  --in: 198 93% 60%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
}

/* 矩阵主题 */
[data-theme='matrix'] {
  --p: 120 100% 50%;
  --pf: 120 100% 40%;
  --pc: 0 0% 0%;
  --s: 120 100% 35%;
  --sf: 120 100% 25%;
  --sc: 0 0% 100%;
  --a: 120 100% 60%;
  --af: 120 100% 50%;
  --ac: 0 0% 0%;
  --n: 120 100% 8%;
  --nf: 120 100% 5%;
  --nc: 120 100% 85%;
  --b1: 0 0% 0%;
  --b2: 120 100% 3%;
  --b3: 120 100% 8%;
  --bc: 120 100% 85%;
  --in: 120 100% 55%;
  --su: 120 100% 50%;
  --wa: 60 100% 50%;
  --er: 0 100% 50%;
}

/* 徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.badge-primary {
  background-color: hsl(var(--p));
  color: hsl(var(--pc));
}

.badge-outline {
  background-color: transparent;
  border: 1px solid hsl(var(--bc) / 0.2);
  color: hsl(var(--bc));
}

.badge-ghost {
  background-color: hsl(var(--b2));
  color: hsl(var(--bc));
}

.badge-lg {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.badge-sm {
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
}

/* 菜单 */
.menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.menu-horizontal {
  flex-direction: row;
}

/* 下拉菜单 */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  z-index: 50;
  background-color: hsl(var(--b1));
  border-radius: 0.5rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid hsl(var(--b3));
  min-width: 12rem;
  padding: 0.5rem;
}

.dropdown-end .dropdown-content {
  right: 0;
}

/* 页脚 */
.footer {
  display: grid;
  grid-auto-flow: row;
  gap: 2.5rem;
  padding: 2.5rem 1rem;
  background-color: hsl(var(--b2));
}

.footer-center {
  text-align: center;
  grid-auto-flow: row;
  place-items: center;
}

/* 链接 */
.link {
  cursor: pointer;
  text-decoration: underline;
}

.link-hover:hover {
  text-decoration: underline;
}

/* 加载指示器 */
.loading {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-spinner {
  border-left: 2px solid currentColor;
}

.loading-lg {
  width: 2rem;
  height: 2rem;
}

.loading-sm {
  width: 0.75rem;
  height: 0.75rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 工具类 */
.text-gradient {
  background: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--b2));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--bc) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--bc) / 0.5);
}

/* 页面过渡动画 */
.page-enter-active,
.page-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section {
    background-attachment: scroll !important;
  }
}

/* 无障碍访问 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .hero-section {
    background-attachment: scroll !important;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .btn,
  .card {
    border-width: 2px;
  }
}

/* 打印样式 */
@media print {
  .navbar,
  .footer,
  .hero-section {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
  }

  .card {
    background: white !important;
    border: 1px solid black !important;
  }
}

/* 文字对比度增强 */
.text-enhanced {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 确保在所有主题下文字都有足够的对比度 */
.section-content {
  background-color: hsl(var(--b1));
  color: hsl(var(--bc));
}

.section-content h1,
.section-content h2,
.section-content h3,
.section-content h4,
.section-content h5,
.section-content h6 {
  color: hsl(var(--bc)) !important;
}

/* Hero Section 文字增强 */
.hero-content {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 背景对比度增强 */
.bg-enhanced {
  background-color: hsl(var(--b1));
  border: 1px solid hsl(var(--b3) / 0.2);
}

/* TextType 组件样式增强 */
.text-type-container {
  color: hsl(var(--bc)) !important;
}

/* 确保 loading 状态文字可见 */
.loading-text {
  color: hsl(var(--bc));
}

/* 文本截断工具类 */
@layer utilities {
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
